import { Form, Input, Button, Select, message } from 'antd';
import './Add.scss'
import '../../static/font/iconfont.css'
import Avatar from './Avatar';
import http from '../../utils/http'
import store from '../../store/index'
import { useState } from 'react';

const { Option } = Select;
const layout = {
    labelCol: {
        span: 7,
    },
    wrapperCol: {
        span: 16,
    },
};
const layout1 = {
    labelCol: {
        span: 7,
    },
    wrapperCol: {
        span: 8,
    },
};


const Add = ({ setaddyemian }) => {

    //保存
    const save = () => {

        let json = form.getFieldsValue(true)
        let location = form2.getFieldsValue(true).location
        console.log(json, location);
        if (json.name != '' && json.id != '' && json.model != ''
            && json.type != '' && json.factory != '' && json.banben != '' && json.style != '' && location != '') {
            //向数据数据库添加数据
            http({
                url: '/device/deviceAdd',
                method: 'post',
                params: {
                    ddetName: json.name,
                    ddetNumber: json.id,
                    ddetType: json.model,
                    dinfRuntime: json.time,
                    dinfState: json.type,
                    ddetFactory: json.factory,
                    ddetVersion: json.banben,
                    ddetStyle: json.style,
                    dinfLocation: location,
                    adminId: 1
                }
            }).then((res) => {
                console.log(res);
                if (res.code == 200) {

                    message.success('保存成功', [0.8]);
                    setTimeout(() => {
                        setaddyemian(false)
                    }, 1500);
                }
            })
        }


    }
    //取消
    const cancel = () => {
        setaddyemian(false)
    }
    const keep = () => {

    }

    const [form] = Form.useForm();
    const [form2] = Form.useForm();

    const onGenderChange = (value) => {
        switch (value) {
            case 'male':
                form.setFieldsValue({
                    note: 'Hi, man!',
                });
                return;

            case 'female':
                form.setFieldsValue({
                    note: 'Hi, lady!',
                });
                return;

            case 'other':
                form.setFieldsValue({
                    note: 'Hi there!',
                });
        }
    };
    const [xialaData, setxialaData] = useState([])
    const xiala = () => {
        http({
            url: '/device/projectAdminId',
            method: 'post'
        }).then((res) => {
            console.log(res.data);
            setxialaData(res.data);
            console.log(xialaData);
        })
    }

    function handleChange(value) {
        console.log(`selected ${value}`);
    }


    return (
        <div className="box">
            <div className='cont'>

                <div className='title'>
                    <span>设备基本信息:</span>
                    <span>设备详细信息:</span>
                </div>
                <div className='message'>
                    <Form {...layout} form={form} name="control-hooks" className='leftfrom' onFinish={keep}>
                        <Form.Item
                            name="name"
                            label="设备名称："
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="id"
                            label="设备编号："
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="model"
                            label="设备型号："

                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input placeholder='ISS20200816' />
                        </Form.Item>
                        <Form.Item
                            name="time"
                            label="运行时间："
                            placeholder='2022-01-23 11:21:23'
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="type"
                            label="运行状态："
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Select
                                placeholder="请选择"
                                onChange={onGenderChange}
                                allowClear
                            >
                                <Option value="正常">正常</Option>
                                <Option value="禁用">禁用</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="factory"
                            label='设备厂家：'
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input placeholder="请输入设备厂家" />
                        </Form.Item>
                        <Form.Item
                            name="banben"
                            label='产品版本：'
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input placeholder="请输入产品版本号" />
                        </Form.Item>
                        <div className='form_1'>
                            <Form.Item
                                name="style"
                                label='类型：'
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input placeholder="请输入类型" />
                            </Form.Item>

                        <Form.Item
                            name="people"
                            label="跟进人："
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Select
                                placeholder="请输入跟进人"
                                onClick={xiala}
                                onChange={handleChange}
                                allowClear
                            >
                                {xialaData.map((v, i) => <Option key={i} value={v.value}>{v.name}</Option>)}
                            </Select>

                        </Form.Item>

                            <Form.Item
                                name="tel"
                                label="联系方式："
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>

                        </div>

                    </Form>

                    <Form {...layout1} form={form2} name="control-hooks" className='right' >
                        <div>
                            <Form.Item
                                className='weizhi'
                                name="location"
                                label="安装位置："
                                labelCol={{ span: 6, offset: 0 }}
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input style={{ width: '233.33px' }} />
                            </Form.Item>
                            <span className='iconfont icon-a-19dingwei'></span>
                            <div className='map'></div>
                        </div>
                        <div>
                            <Form.Item
                                className='phone1'
                                name="Nowphoto"
                                label="现场照片："
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Avatar />
                            </Form.Item>
                            <Form.Item
                                className='phone2'
                                name="photo"
                                label="设备照片："
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Avatar />
                            </Form.Item>

                        </div>
                    </Form>
                </div>
                <Button type="primary" size='large' className='btn' onClick={save}>保存</Button>
                <Button type='default' size='large' onClick={cancel}>取消</Button>
            </div>




        </div>
    );
}
export default Add;